<template>
  <div class="orderPane">
    <div class="head">
      <span class="one">比</span>
      <span class="two">赛</span>
      <span class="tree">赔</span>
      <span class="four">率</span>
      <span class="five">纪</span>
      <span class="sex">录</span>
    </div>
    <scrolls></scrolls>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="" name="first">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="博彩公司编号">
                  <span>{{ props.row.bno }}</span>
                </el-form-item>
                <el-form-item label="赛事纪录编号">
                  <span>{{ props.row.erno }}</span>
                </el-form-item>
                <el-form-item label="比赛赔率基准值">
                  <span>{{ props.row.bomo }}</span>
                </el-form-item>
                <el-form-item label="比赛赔率类型">
                  <span>{{ props.row.mot }}</span>
                </el-form-item>
                <el-form-item label="赔率发布日期">
                  <span>{{ props.row.ordate }}</span>
                </el-form-item>
                <el-form-item label="赔率发布日期">
                  <span>{{ props.row.ortime }}</span>
                </el-form-item>
                <el-form-item label="胜赔率">
                  <span>{{ props.row.wodds }}</span>
                </el-form-item>
                <el-form-item label="负赔率">
                  <span>{{ props.row.nodds }}</span>
                </el-form-item>
                <el-form-item label="平赔率">
                  <span>{{ props.row.eodds }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="比赛赔率编号"
            prop="id">
          </el-table-column>
          <el-table-column
            label="赛事时间"
            prop="name">
          </el-table-column>
          <el-table-column
            label="比赛赔率描述"
            prop="desc">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import scrolls from "./scrolls";

export default {
  components:{
    scrolls
    // order
  },
  name: "matchOddsRecord",
  data() {
    return {
      activeName: 'first',
      tableData: [{
        address: '法国巴黎',
        id: 'M1001',
        bno:'B001',
        erno:'E0001',
        bomo:'B10001',
        mot:'5:7',
        ordate:'5月26日',
        ortime:'14:20',
        wodds:'5:3',
        nodds:'1:9',
        eodds:'8:2',
        name: '1993年6月8日',
        desc: '童叟无欺',
      }, {
        address: '德国柏林',
        id: 'M1002',
        bno:'B002',
        erno:'E0002',
        bomo:'B10002',
        mot:'9:7',
        ordate:'12月25日',
        ortime:'14:120',
        wodds:'53:3',
        nodds:'11:9',
        eodds:'18:21',
        name: '1968年2月19日',
        desc: '稳赚不亏',
      },
        {
          address: '美国华盛顿',
          id: 'M1003',
          bno:'B003',
          erno:'E0003',
          bomo:'B10003',
          mot:'15:27',
          ordate:'9月11日',
          ortime:'32:20',
          wodds:'51:43',
          nodds:'31:29',
          eodds:'82:21',
          name: '2021年9月2日',
          desc: '诚信无欺',
        },
        {
          address: '马来西亚新加坡',
          id: 'M1004',
          bno:'B004',
          erno:'E0004',
          bomo:'B10004',
          mot:'6:2',
          ordate:'12月11日',
          ortime:'14:19',
          wodds:'3:3',
          nodds:'10:9',
          eodds:'8:7',
          name: '2022年1月3日',
          desc: '精彩十足',
        },
        {
          address: '日本东京',
          id: 'M1005',
          bno:'B005',
          erno:'E0005',
          bomo:'B10005',
          mot:'43:52',
          ordate:'4月16日',
          ortime:'11:21',
          wodds:'53:66',
          nodds:'6:9',
          eodds:'8:8',
          name: '20222年3月1日',
          desc: '火力十足',
        },
        {
          address: '瑞士瑞典',
          id: 'M1006',
          bno:'B006',
          erno:'E0006',
          bomo:'B10006',
          mot:'5:7',
          ordate:'10月16日',
          ortime:'4:7',
          wodds:'5:2',
          nodds:'9:9',
          eodds:'8:2',
          name: '2024年6月10日',
          desc: '青出于蓝胜于蓝',
        },
        ,
        {
          address: '俄罗斯红场',
          id: 'M1006',
          bno:'B006',
          erno:'E0006',
          bomo:'B10006',
          mot:'5:7',
          ordate:'5月26日',
          ortime:'14:20',
          wodds:'5:3',
          nodds:'1:9',
          eodds:'8:2',
          name: '2024年6月16日',
          desc: '盛世框景，百家争宠',
        }
      ]
    }
  }, methods: {
    handleClick(tab, event) {

    }

  }, created() {
  }

}
</script>

<style scoped lang="stylus">
.head
  font-family "华文琥珀"
  font-size 56px
  margin-top 20px
  margin-bottom 20px
  letter-spacing 40px
  .one
    color cyan
  .two
    color papayawhip
  .three
    color purple
  .four
    color peru
  .five
    color orchid
  .sex
    color brown

  .span
    left 55px
.orderPane
  margin-top 20px
.demo-table-expand
  font-size: 0

.demo-table-expand
  label
  width: 90px
  color: #99a9bf

.demo-table-expand
  .el-form-item
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;


</style>
